<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<!-- Pager CSS -->
<link rel="stylesheet" href="__STATIC__/assets/vendor/jquery-pager/Pager.css">
<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element.css">
<style type="text/css">
	table label{
		font-weight: bold;
		/*padding-right: 20px;*/
	}
	table span{
		margin-right:50px;
	}
</style>
</head>

<body>

	<!-- MAIN -->
	<div class="main" id="account-list">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>账号管理</li>
			    <li>账号列表</li>
			</ul>
			<div class="container-fluid">
				
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline" role="form" id="form1">
						<input type="text" v-model="search.true_name" class="form-control" name="true_name" placeholder="姓名" size="8">
					    <button @click="getList" type="button" class="btn btn-primary search">查询</button>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row" id="result">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>账号</th>
								<th>姓名</th>
								<th>角色</th>
								<th>权限角色</th>
								<th>只看自己订单</th>
								<th>状态</th>
								<th>添加时间</th>
								<th>最近登陆</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<!-- 模板 -->
							<tr v-for="row in rows">
								<td>{{row.account}}</td>
								<td>{{row.true_name}}</td>
								<td>{{row.role}}</td>
								<td>{{row.role_names}}</td>
								<td>
									<el-switch
									v-model="row.order_status"
									@change="change(row)"
									:active-value="1"
									:inactive-value="0"
									active-color="#13ce66">
									</el-switch>
								</td>
								<td>{{row.status_txt}}</td>
								<td>{{row.add_time}}</td>
								<td>{{row.last_login_time}}</td>
								<td>
									<a v-if="row.status==1" href="javascript:;" @click="setStatus(row.id,2)" style="color:red"><i class="fa fa-minus-circle"></i> 禁用</a>
									<a v-else href="javascript:;" @click="setStatus(row.id,1)" style="color:green"><i class="fa fa-plus-circle"></i> 启用</a>

									<a href="javascript:;" @click="openRefund(row)" style="color:green;margin-left: 10px;;"><i class="el-icon-edit-outline"></i> 编辑权限</a>
									<a href="javascript:;" @click="openEditName(row)" style="color:green;margin-left: 10px;;"><i class="el-icon-edit-outline"></i> 编辑姓名和密码</a>

									<a href="javascript:;" @click="openRole(row)" style="color:green;margin-left: 10px;;"><i class="el-icon-edit-outline"></i> 角色</a>
								</td>
							</tr>

							<tr v-if="rows.length==0">
								<th style="color:red"><i class="fa fa-search" aria-hidden="true"></i> 查询无记录</th>
							</tr>
						</tbody>
					</table>
					<div>
						<el-pagination
						@current-change="handleCurrentChange"
						:page-size="page_size"
						layout="total,  prev, pager, next, jumper"
						:total="total">
					  </el-pagination>
					</div>
					
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- 修改退款金额 -->
		<el-dialog
		title="权限设置"
		:visible.sync="dialogVisible"
		@close="rulesClose"
		width="30%">
			<el-tree
			v-if="dialogVisible"
			ref="tree"
			:data="data"
			show-checkbox
			node-key="id"
			@check="getCheckedNodes"
			:default-expanded-keys="[1]"
			:default-checked-keys="defaultChecked"
			:props="defaultProps">
			</el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="setRules">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改退款金额 -->
		<el-dialog
		title="编辑姓名和密码"
		:visible.sync="dialogVisibleName"
		width="30%">
			<el-input v-model="name" placeholder="请输入名字" size="normal" clearable></el-input>
			<el-input style="margin-top:10px;" v-model="password" placeholder="请输入密码" size="normal" clearable></el-input>
			
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleName = false">取 消</el-button>
				<el-button type="primary" @click="setName">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog
        title="编辑角色"
        :visible.sync="selectDialog"
        top="20vh"
      >
        <el-form ref="selectRef" label-width="120px">
          <el-form-item label="ID">
            <el-input
              v-model="selectIds"
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 12 }"
              disabled
            />
          </el-form-item>
          
          <el-form-item  label="角色">
            <el-select
              v-model="role_ids"
              class="ya-width-100p"
              clearable
              filterable
              multiple
            >
              <el-option
                v-for="item in roleData"
                :key="item.role_id"
                :label="item.role_name"
                :value="item.role_id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button  @click="selectCancel">取消</el-button>
          <el-button  type="primary" @click="selectSubmit">提交</el-button>
        </div>
      </el-dialog>
		
		<!-- END MAIN CONTENT -->
	</div>

	<!-- END MAIN -->
	<div class="clearfix"></div>
	<!-- FOOTER -->
	{%include file="public/footer" /%}
	<!-- END FOOTER -->


	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/bootstrap/js/bootstrap.min.js"></script>

	<script src="__STATIC__/assets/vendor/jquery.form.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script src="__STATIC__/assets/scripts/myfun.js"></script>
	<script src="__STATIC__/assets/vendor/My97DatePicker/WdatePicker.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script>
		var vm = new Vue({
			el: '#account-list',
			data(){
				return {
				name:'',
				password:'',
				dialogVisibleName:false,
				defaultChecked:[],
				rules:[],//权限
				dialogVisible:false,
				accountId:0,
				page_size:20,
				search:{
					true_name: ''
				},
				rows: [],
				total: 0,
				cur_page: 1,
				data: [
					{
						id: 1,
						label: '订单管理',
						children: [{
							id: 2,
							label: '查询全部订单'
						},{
							id: 7,
							label: '显示工厂价'
						}]
					},
					{
						id: 3,
						label: '售后管理',
						children: [{
							id: 4,
							label: '显示工厂价'
						}]
					},
					{
						id: 5,
						label: '财务管理',
						children: [{
							id: 6,
							label: '无团队数据'
						}]
					}
				],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				selectDialog:false,
				role_ids:[],
				roleData:[],
				selectIds:''
			}},
			created: function(){
				this.getList();
			},
			methods:{
				change(e){
					console.log({e});
					let t = this;
					$.post("{%:url('Account/setOrderStatus')%}",{
						id: e.id,
						order_status: e.order_status
					},function(rsp){
						if (rsp.code==1) {
							t.$message.success(rsp.msg);
							t.getList(t.cur_page);
						}else{
							t.$message.error(rsp.msg);
						}
					},'json')
				},
				selectCancel() {
					this.selectDialog = false
				},
				openRole(row){
					this.selectIds = row.id
					this.selectDialog = true
				},
				selectSubmit(){
					// editrole({
					// ids: this.selectGetIds(row),
					// role_ids: this.role_ids
					// }).then(res => {
					// this.list()
					// this.$message.success(res.msg)
					// }).catch(() => {
					
					// })
					let data = {
						id: this.selectIds,
						role_ids: this.role_ids
					}
					let t = this
					$.post("{%:url('Account/editrole')%}",data,function(rsp){
						if (rsp.code==1) {
							t.$message.success(rsp.msg);
							t.selectDialog = false
						}else{
							t.$message.error(rsp.msg);
							t.selectDialog = false
						}
					},'json')
				},
				// 关闭权限弹框
				rulesClose(){
					this.defaultChecked = [];
				},
				handleCurrentChange(val) {
					this.getList(val);
				},
				openRefund(row){
					this.accountId = row.id;
					if(row.rules){
						this.defaultChecked = row.rules.split(',');
					}else{
						this.defaultChecked = [];
					}
					this.dialogVisible = true;
				},
				openEditName(row){
					console.log(88888);
					this.accountId = row.id;
					this.name = row.true_name;
					this.dialogVisibleName = true;
				},
				// 选中权限列表
				getCheckedNodes(val){
					this.defaultChecked = this.$refs.tree.getCheckedKeys();
					console.log('this.defaultChecked',this.defaultChecked);
				},
				getList: function(page=1){
					var data = {};
					data = this.search;
					var _this = this;
					$.ajax({
			            url: "{%:url('Account/getList')%}?page="+page,
			            type:'POST',
			            dataType: 'json',
			            data: data,
			            success:function(rsp){
			                _this.rows = rsp.data.rows;
			                _this.total = rsp.data.total;
							_this.page_size = rsp.data.page_size;
							_this.cur_page = Number(rsp.data.page);
							_this.roleData = rsp.data.role;
			            }
			        });
				},
				setStatus(id,status) {
					let t = this;
					$.post("{%:url('Account/setStatus')%}",{
						id: id,
						status: status
					},function(rsp){
						if (rsp.code==1) {
							t.$message.success(rsp.msg);
							t.getList(t.cur_page);
						}else{
							t.$message.error(rsp.msg);
						}
					},'json')
				},
				// 设置权限
				setRules() {
					let t = this;
					$.post("{%:url('Account/setRules')%}",{
						id: t.accountId,
						rules: t.defaultChecked.join(',')
					},function(rsp){
						if (rsp.code==1) {
							t.$message.success(rsp.msg);
							t.getList(t.cur_page);
							t.dialogVisible = false;
						}else{
							t.$message.error(rsp.msg);
						}
					},'json')
				},
				// 设置权限
				setName() {
					let t = this;
					$.post("{%:url('Account/setRules')%}",{
						id: t.accountId,
						true_name: this.name,
						password:this.password
					},function(rsp){
						if (rsp.code==1) {
							t.$message.success(rsp.msg);
							t.getList(t.cur_page);
							t.dialogVisibleName = false;
						}else{
							t.$message.error(rsp.msg);
						}
					},'json')
				}
			}
		});
	</script>
</body>

</html>